import { FC, useState } from "react"
import styles from "./index.less"
import MutilTabs, { IMutilTabsProps } from "@/components/MutilTabs/index"
import Medicine from "./components/Medicine"

export interface MedicalTabPane {
  label?: string
  key?: any,
  slug?: string
  type?: number | 0,
  otherType?: string | "all"
}



const medicalAdvice: FC = () => {

  const [tabValue, setTabValue] = useState<string>("0")

  const handlerTabs = (key: string) => {
    setTabValue(key)
  }
  const tabPanes: IMutilTabsProps = {
    tabValue: tabValue,
    tabsAtrrs: {
      className: `${styles.medicalTabs}`,
      onChange: (key: string) => { handlerTabs(key) },
    },

    columns: [
      {
        className: `${styles.medicalTabsItem}`,
        tab: "口服用药",
        children: <Medicine tabItemType={1} />,
      },
      {
        className: `${styles.medicalTabsItem}`,
        tab: "静脉药物",
        children: <Medicine tabItemType={1} />,
      },
      {
        className: `${styles.medicalTabsItem}`,
        tab: "其他用药",
        children: <Medicine tabItemType={1} />,
      },
      {
        className: `${styles.medicalTabsItem}`,
        tab: "检验申请",
        children: <Medicine tabItemType={0} />,
      },
      {
        className: `${styles.medicalTabsItem}`,
        tab: "检查申请",
        children: <Medicine tabItemType={0} />,
      },
      {
        className: `${styles.medicalTabsItem}`,
        tab: "手术",
        children: <Medicine tabItemType={0} />,
      },
      {
        className: `${styles.medicalTabsItem}`,
        tab: "其他医嘱",
        children: <Medicine tabItemType={0} />,
      }

    ]
  }


  return (
    <div className={styles.medicalAdvice}>
      {
        MutilTabs(tabPanes)
      }
    </div>
  )
}

export default medicalAdvice